<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
        <meta name="description" content="Test on HTML and CSS">
        <meta name="author" content="Huoty">
        <meta http-equiv="refresh" content="30">
        <title>Web 设计</title>
        <link rel="shortcut icon" href="/mylogo/logo_k_icon_72.ico" type="image/x-icon" />
        <script src="../jquery/jquery-2.1.3.min.js"></script>
        <style>
.hover{
    background-color: #00f;
    color: #fff;
    cursor: pointer;
}
            .page{
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小文</td>
                    <td>20</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>小李</td>
                    <td>21</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>小慧</td>
                    <td>21</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>琪琪</td>
                    <td>19</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>小勇</td>
                    <td>22</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>馨儿</td>
                    <td>23</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>小鹏</td>
                    <td>21</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<script>
var $alltr = $('tbody tr');
//                行（记录）总数
var totalRows = $alltr.length;
//                每页显示行数

var perPage = 2;
//                总页数

var totalPageNum = Math.ceil(totalRows/perPage);
//                构建分页部分
var pageDiv = $("<div id=\"pages\"></div>");

for(var i=0;i<totalPageNum;i++){
    $('<span class="page">'+(i+1)+'</span>').appendTo(pageDiv);
}
//pageDiv.insertBefore('table');
$("table").after(pageDiv)

$('.page').hover(function(){
    $(this).addClass('hover');
}, function(){
    $(this).removeClass('hover');
});
//                初始隐藏全部tr记录，只显示第一页tr记录
$alltr.hide();
$('span').eq(0).addClass('currentPage');
for(var i=0;i<perPage;i++){
    $alltr.eq(i).show();
}

$('span').click(function(){
    //                    隐藏全部tr记录
    $alltr.hide();
    //                    当前页码
    var currentPageNum = $(this).text();
    //                    tr记录起始索引
    var start = (currentPageNum-1)*perPage;
    //                    tr记录截止索引
    var end = currentPageNum*perPage-1;

    for(var i=start;i<=end;i++){
        $alltr.eq(i).show();
    }
});
</script>
